<template>
  <ex-dialog width="800px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose" append-to-body>
    <div class="main" v-loading="loading">
      <template>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
          <el-form-item label="选择客户：" prop="id">
            <el-select v-model="ruleForm.id" filterable placeholder="请选择" :style="{ width: inputWidth }">
              <el-option v-for="item in servingCustomersOptions" :key="item.id" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="上传导入文件：" >
            <!-- <el-checkbox-group v-model="ruleForm.fileName" v-show="false"></el-checkbox-group> -->
            <el-upload  class="upload-demo" ref="upload" :action="fileaction" :headers="headers" :data="fileData" :limit="1"
              :on-success="handleFileChange" :on-exceed="handleExceed" :on-remove="handleRemove" :on-preview="handlePreview"
              :before-remove="beforeRemove" :on-change="handleChange"  :file-list="fileList" accept=".xlsx,.xls,.xlsx,.xlsm,.xltx,.xltm" :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>

        </el-form>
      </template>
    </div>
    <div class="button_box" v-if="pathType != 'watch'">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">确认导入</el-button>
    </div>
    <!-- 导入失败弹窗 -->
    <el-dialog title="导入失败" :visible.sync="dialogVisible" width="500" append-to-body>
      <div>{{ importMessage }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </ex-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import Loading from "@/components/Loading/index";
// api
import {
  servingCustomers3,
  liveDetail, recordUpdateLive
} from "@/api/customer/serviceData";
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
    pathType:String,
  },
  data() {
    return {
      labelWidth: "140px",
      inputWidth: "430px",
      title: "售卖明细导入",
      loading: false,
      disabled: false,
      AgreeLoading: false,
      dialogVisible: false, //导入失败弹窗
      importMessage: '', //导入失败原因
      ruleForm: {
        id: '',//id
        fileName:'',
      },
      rules: {
        id: [
          { required: true, message: "请选择客户", trigger: ["change", "bulr"] }
        ],
      },
      headers: {},//设置上传文件请求头
      fileData: {
        id:'',
      },
      fileList:[],
      fileaction: process.env.VUE_APP_BASE_API + "/service/sales/detail/v1/addImport", //导入接口
      servingCustomersOptions: [],//服务客户下拉
    };
  },
  computed: {},
  created() {
    console.log(this.pathType)
    if (this.pathType == 'write') {
      this.title = '核销记录导入'
      this.fileaction = process.env.VUE_APP_BASE_API + "/service/verify/record/v1/addImport" //核销记录导入接口
    }
    // console.log(this.fileaction)
    this.getServingCustomers()
    this.headers ={'X-Access-Token' : getToken() || ''}
  },
  mounted() {

  },
  computed: {},
  methods: {//服务客户下拉
    getServingCustomers() {
      servingCustomers3().then((res) => {
        this.servingCustomersOptions = res.result
      })
    },
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
    submitForm(formName) {
      //创建确定
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.ruleForm.fileName == ''){
            this.$message.error('请上传文件')
            return
          }
          this.AgreeLoading = true
          this.fileData.id = this.ruleForm.id
          this.$refs.upload.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error(`上传文件数量不能超过 1 个,请先删除原有文件!`);
    },
    handleChange(file, fileList) {
      this.ruleForm.fileName = file.name
      console.log(file, fileList);
    },
    //删除文件
    handleRemove(file, fileList) {
      this.ruleForm.fileName = ''
      this.AgreeLoading = false
      console.log(file, fileList);
    },
    //导入文件
    handleFileChange(res, file) {
      console.log('文件', res, file)
      this.AgreeLoading = false
      if (res.code == 200) {
        this.$message.success('上传成功');
        this.handleClose()
        this.$emit('success')
      } else {
        // this.$message.error(res.message);
        this.importMessage = res.message || res.msg
        this.dialogVisible = true
        setTimeout(() => {
          this.ruleForm.fileName = ''
          this.fileList = []
        }, 800)
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

.el-select,
.el-input,
.el-cascader {
  width: 400px;
}

.main {
  padding: 20px 20px;
}

.button_box {
  display: flex;
  justify-content: center;
}

.el-radio-group {
  display: flex;
  flex-direction: column;

  .el-radio {
    margin-bottom: 14px;
  }
}

.form_item {
  display: flex;
}

.form_item_label {
  margin-left: 18px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
}

.form_item_detail {
  margin-left: 10px;
}
</style>